<!-- 
      list.html
      搜索出来的列表页  id=list
      
      Created by tang on 2017-03-10.
      Copyright 2017 tang. All rights reserved.
 -->

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../css/list.css" />
    <style type="text/css">
    	.mui-backdrop{
    		display: none;
    	}
    </style>
</head>

<body class="white">
	<header class="mui-bar mui-bar-transparent inf">
	    <a class="mui-action-back mui-icon mui-pull-left bexta-white-back"><span></span></a>
	    <a class="mui-icon mui-pull-right bexta-icon bexta-icon-setSearch link" _id="search" _href="search.html" _title="高级筛选" ><span></span></a>
	    <!--<a class="mui-icon mui-pull-right bexta-icon bexta-icon-maps" ><span></span></a>-->
	</header>
	<div class="mui-content mui-scroll-wrapper  " id="onescroll"> 
		<div id="ner" class="mui-scroll loading">
			<div class="setSearchBtn">
		   	 	<img src="../icon/list-top.png" class="maximg" alt="" />
		   	 	<div class="search-result">
		   	 		<h3>{{msg.shop_name}}</h3>
		   	 		<div>为您找到超过{{msg.count}} 条信息</div>
		   	 	</div>
		   	 	<div class="control-btn">
		   	 		<!--<img src="../icon/icon_ditu-youquan-@2x.png" v-if="commend_id!=3" alt="" class="link" _id="maps" _title="附近的商家" _href="map.html" />-->
		   	 		<img src="../icon/icon_saixuan-youquan@2x.png" alt="" class="link" _id="search" _href="search.html" _title="高级筛选" :_extras="'type='+commend_id" />
		   	 		<!--<img src="../icon/icon_saixuan-youquan@2x.png" alt="" v-else  class="link" _id="actorSearch" _title="选演员" :_extras="'commend_id='+commend_id" _href="actorSearch.html"  />-->
		   	 	</div>
			</div>
			<div class="search-list">
			<div class="title">
				<p>排序</p>
				<p><a  id="search-title-text" ><span>推荐排序</span> <img src="../icon/icon_xialajiantou@2x.png"  alt="" /></a></p>
				<div id="topPopover" class="mui-popover" >
					<div class="mui-popover-arrow"></div>
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<div class="popover-content">
								<div v-bind:class="sort==1?'active':''" data-type="1"><span>推荐排序</span></div>
								<div v-bind:class="sort==2?'active':''" data-type="2"><span>价格从低到高</span></div>
								<div v-bind:class="sort==3?'active':''" data-type="3"><span>价格从高到低</span></div>
								<div v-bind:class="sort==4?'active':''" data-type="4"><span>最新上架</span></div>
								<div v-bind:class="sort==5?'active':''" data-type="5"><span>评分等级</span></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="list-item-box">
				<template v-for="(item,index) in msg.list">
					<div class="item "  >
						<div class="collect " :data-idx="index" :data-id="item.id" v-bind:class="item.is_collect==1?'active':''"></div>
						<img src="../icon/mask-big.jpg" :data-load="item.img" alt="" class="link" _id="detail" _href="detail.html" :_extras="'pid='+item.id" />
						<div class="item-name mui-clearfix" >
							<div class="mui-pull-right" v-if="item.price!='0.00'">¥{{item.price}}</div>
							<div class="mui-pull-right" v-else>询价</div>
							<div class="name">{{item.name}}</div>
							<div class="score mui-clearfix" >
								<div class="score_star mui-pull-left" :data-cover="item.grade">
								</div>
								<div class="mui-pull-left score_comment" v-if="item.count_discuss!=0">
									{{item.count_discuss}}条评论
								</div>
							</div>
						</div>
						<!--commend_id==3选演员-->
						<!--<div class="item-name mui-clearfix" v-if="commend_id==3"> 
							<div class="mui-clearfix actor-name">
								<div class="mui-pull-right">
									青年 男  国内 180-185cm 25-30岁
								</div>
								{{item.name}}
							</div>
							<div class="mui-clearfix actor-fen">
								<div class="mui-pull-right">
									<span>舞蹈</span>
									<span>舞蹈</span>
									<span>舞蹈</span>
								</div>
								<div class="score mui-clearfix" style="margin-top: 4px;">
									<div class="score_star mui-pull-left" :data-cover="item.grade">
									</div>
									<div class="mui-pull-left score_comment" v-if="item.count_discuss!=0">
										{{item.count_discuss}}条评论
									</div>
								</div>
							</div>
						</div>-->
					</div>
				</template>
			</div>
		</div>
		</div>
	</div>
	
<script src="../js/mui.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/mui.extend.js"></script>
<script src="../js/mui.pullToRefresh.js"></script>
<script src="../js/mui.pullToRefresh.material.js"></script>
<script src="../js/bexta.js"></script> 
<script type="text/javascript">
	var apps , sendData;
	mui.init();
	mui.plusReady(function () {
		var view = bexta.getWebview();
		sendData = view.sendData || {};
		sendData['firstrow'] = 0;
		sendData['listrow'] = 3;
		sendData['sort'] = 1;
		sendData['sid'] = view.sid;
		sendData['commend_id'] = sendData['commend_id'] || view.type;
		var user = bexta.getStorage(USER);
		if( user && user != '' ){
			sendData['uid'] = user.uid;
		}
		bexta.ajax(api.search_result, function(res){
			initVue(res,sendData.firstrow, sendData.listrow, 1);
		},{data:sendData});
	});
	//高级筛选后,返回,组织数据;!
	window.addEventListener('toggleData', function(evt){
		var send = evt.detail.sendData;
		send['firstrow'] = 0;
		send['listrow'] = 3;
		send['sort'] = 1;
		send['sid'] = bexta.getWebview().sid;
		sendData = mui.extend(sendData, send);
		var user = bexta.getStorage(USER);
		if( user && user != '' ){
			send['uid'] = user.uid;
		}
		bexta.ajax(api.search_result, function(res){
			apps.msg = res;
			apps.firstrow = send.firstrow;
			apps.listrow = send.listrow;
			apps.sort = 1;
		},{data:send});
	});
	window.addEventListener('toggleGetData', function(evt){
		//演员专用
//		bexta.getWebview().reload();
		var send = evt.detail.da;
		send['firstrow'] = 0;
		send['listrow'] = 3;
		send['sort'] = 1;
		 sendData = mui.extend(sendData, send);
		var user = bexta.getStorage(USER);
		if( user && user != '' ){
			send['uid'] = user.uid;
		}
		
		bexta.ajax(api.search_result, function(res){
			apps.msg = res;
			apps.firstrow = send.firstrow;
			apps.listrow = send.listrow;
			apps.sort = 1;
//			apps.commend_id = sendData['commend_id']
		},{data:send});
		
	})
	function initVue(datas, first, last){
		apps = new Vue({
			el:'#onescroll',
			data:{
				sort:1,
				commend_id:sendData.commend_id,
				activePullToRefresh:false,
				firstrow:first,
				listrow:last,
				msg:datas
			},
			mounted:function(){
				this.firstrow = this.msg.list.length;
				document.querySelector('.bexta-icon-setSearch').setAttribute('_extras', 'type='+this.commend_id);
//				if( this.listrow > this.msg.count ){
//					this.activePullToRefresh = true;
//				}
				initMounted();
				initEvent();
				bexta.imageLoad('[data-load]');
				
		},
		updated:function(){
			mui('.score_star').score({
				eventstar:false, 
				fullStar:"../icon/icon_xingxing@2x.png",
				halfStar:"../icon/icon_bankexin@2x.png",
				voidStar:"../icon/icon_void@2x.png"
			});
			bexta.imageLoad('[data-load]');
		}
		});
	}
	function initMounted(){
		document.querySelector('.loading').classList.add('loadRun');
		mui('.popover-content').on('tap', 'div', function() {
			mui('.popover-content div').each(function(){
				this.classList.remove('active');
			})
			this.classList.add('active');
			D('#search-title-text span').dom[0].innerText = this.innerText;
			apps.sort = this.getAttribute('data-type');
			sendData['sort'] = apps.sort;
			sendData['firstrow'] = 0;
			mui('.mui-popover').popover('hide',document.getElementById("search-title-text"));  //关闭
			bexta.ajax(api.search_result, function(res){
				apps.msg = res;
				apps.firstrow = apps.msg.list.length;
				apps.activePullToRefresh = false;
//				mui('#ner.mui-scroll').pullToRefresh().endPullUpToRefresh(true); 
				mui('#ner.mui-scroll').pullToRefresh().refresh(true);
			}, {data:sendData});

		});
		mui('body').on('hidden', '.mui-popover', function(e) {
			D('#search-title-text img').dom[0].classList.remove('run');
		});
		mui('body').on('tap', '#search-title-text', function(){
			mui('.mui-popover').popover('toggle',document.getElementById("search-title-text"));
			var img = this.querySelector('img');
			if( img.classList.contains('run') ){
				img.classList.remove('remove');
			}else{
				img.classList.add('run'); 
			}
		});
		
		mui('.score_star').score({
			eventstar:false, 
			fullStar:"../icon/icon_xingxing@2x.png",
			halfStar:"../icon/icon_bankexin@2x.png",
			voidStar:"../icon/icon_void@2x.png"
		});
		
		mui('body').on('tap', '.collect', function(){
			var user = bexta.isLogin(true);
			if( !user ){
				//未登录
				mui.confirm("您还没有登录,是否登录?", TITLE, CONFIRM, function(item){
					if( item.index == 1 ){
						user = bexta.isLogin();
					}
				});
			}else{
				//已经登录
				var idx = this.getAttribute('data-idx'),
					oid = this.getAttribute('data-id');
				if( apps.msg.list[idx].id == oid ){
					var list = apps.msg.list[idx];
					if( list.is_collect == 0 ){
						//加
						bexta.jsonToString(list)
						bexta.ajax(api.collect, function(res,msg){
							mui.toast(msg);
							apps.msg.list[idx].is_collect = 1;
						}, {data:{uid:user.uid, goods_id:list.id}});
					}else{
						//删除
						bexta.ajax(api.del_collect, function(res,msg){
							mui.toast(msg);
							apps.msg.list[idx].is_collect = 0;
						},{ data:{uid:user.uid,goods_id:list.id, product_id:0 } });
					}
				}else{
					mui.toast('收藏失败，数据有误');
				}
			}
		})
	}
	function initEvent(){
		var deceleration = mui.os.ios?0.003:0.0009;
		var scroll = mui('#onescroll.mui-scroll-wrapper').scroll({
			bounce: false,
			indicators: true, //	是否显示滚动条 
			deceleration:deceleration
		});
		//滚动头部实时改变按钮
	   	mui('.mui-bar-transparent').transparent2({
	   		scroll:scroll,
	   		offset:100,
	   		success:function(obj, opa){
				document.querySelector('.bexta-icon-setSearch').style.opacity = opa;
//				document.querySelector('.bexta-icon-maps').style.opacity = opa;
	   			D('.control-btn img').each(function(){
	   				this.style.opacity = 1-opa;
	   			});
	   			var backbtn = obj.element.querySelector('.bexta-white-back');
	   			if( opa > 0.3 ){
	   				backbtn.classList.add('bexta-drak-back');
	   			}else{
	   				backbtn.classList.remove('bexta-drak-back')
	   			} 
	   		}
	   	});
		mui('#ner.mui-scroll').pullToRefresh({
			up: {
				callback: function() {
					var self = this;
					if( !apps.activePullToRefresh ){
						sendData['firstrow'] = apps.firstrow;
						sendData['sort'] = apps.sort;
						bexta.jsonToString(sendData);
						bexta.ajax(api.search_result, function(res){
							for( var i in res.list ){
								apps.msg.list.push( res.list[i] );
							}
							apps.firstrow = apps.msg.list.length;
							apps.activePullToRefresh = res.list.length < apps.listrow ? true : false;
							self.endPullUpToRefresh(apps.activePullToRefresh); 
						},{data:sendData});
					}else{
						self.endPullUpToRefresh(apps.activePullToRefresh); 
					}
					
				}
			}
		});
	}


	
</script>
</body>
</html>